<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:blut="http://github.com/blutorange"
	xmlns:xi="http://www.xima.de/taglib/xfc"
	xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="./template.xhtml">

	<f:metadata>
		<f:viewAction actionListener="#{testBean.setCodeLanguage('scss')}"/>
		<f:viewAction actionListener="#{testBean.setCode('body { color: red; }')}"/>
	</f:metadata>

	<ui:define name="headLast">
		<h:outputScript name="extender.js" />
	</ui:define>

	<ui:define name="bodyFirst">
		<h:form>
			<p:dialog id="monacoDialog" widgetVar="monacoDialog" dynamic="true" modal="true"
					width="800" header="Monaco Dialog">
				<blut:monacoEditorFramed widgetVar="monacoDialog" id="monaco"
					value="#{testBean.code}" width="100%" autoResize="true"
					editorOptions="#{testBean.editorOptions}"
					style="flex-grow: 1;flex-basis: 0" height="600px"
					uiLanguage="#{testBean.uiLanguage}" extender="extender.js.xhtml?type=basic-false">
				</blut:monacoEditorFramed>		
			</p:dialog>
		</h:form>
	</ui:define>
	
	<ui:define name="monaco">
		<p:tabView id="monacoTabs">
			<p:tab id="tabSimple" title="Tab one without monaco">
				Monaco editor is in the second tab. But you can
				<p:commandButton value="open monaco in a dialog" onclick="PF('monacoDialog').show();return false;"/>
			</p:tab>
			<p:tab id="tabMonaco" title="Tab with monaco" dynamic="true">
				<blut:monacoEditorFramed widgetVar="monaco" id="monaco"
					value="#{testBean.code}" width="100%" autoResize="true"
					editorOptions="#{testBean.editorOptions}"
					style="flex-grow: 1;flex-basis: 0" height="600px"
					uiLanguage="#{testBean.uiLanguage}" extender="extender.js.xhtml#basic-false">
				</blut:monacoEditorFramed>
			</p:tab>
		</p:tabView>
	</ui:define>
	
	<ui:define name="script">
		<script>
		window.testCase = function() {
        	log("No monaco editor should be visible initially on page load");
        	log("Click on 'open monaco in a dialog'");
			log("A modal dialog should open, a monaco editor with some code should be clearly visible in the dialog");
			log("======");
			log("Reload the page");
			log("======");
			log("Click on 'tab with monaco'");
			log("A monaco editor should be clear visible inside the second tab");
			log("Click on 'tab one without monaco'");
        	log("Click on 'open monaco in a dialog'");
			log("A modal dialog should open, a monaco editor with some code should be clearly visible in the dialog");
        };
	    </script>
	</ui:define>
</ui:composition>